<template>
	<view>
		<view class="search">
			<u-search
				height="65rpx"
				bgColor="#f8f8f8"
				placeholder="商品搜索"
				:disabled="false"
				v-model="keyword"
				@search="initList"
				:showAction="false"
			></u-search>
		</view>
		<u-line color="#ddd"></u-line>
		<view class="viewport">
			<!-- 分类 -->
			<view class="categories">
				<!-- 左侧：一级分类 -->
				<scroll-view class="primary" scroll-y>
					<view
						class="item"
						v-for="(item, index) in categoryList"
						:key="item.id"
						:class="{ active: activeIndex == index }"
						:data-item="item" 
						:data-index="index"
						@tap="leftNavigate"
					>
						<text class="name">{{ item.name }}</text> 
					</view>
				</scroll-view> 
				<!-- 右侧：二级分类 -->
				<scroll-view class="secondary" scroll-y>
					<!-- 内容区域 -->
					<view
						v-show="subCategoryList.length != 0"
						class="panel"
						v-for="item in subCategoryList"
						:key="item.id"
					>
						<view class="section" @tap="goToGoods(item.id)">
							<!-- <image class="image" :src="item.image[0]"></image> -->
							<image :src="'https://images.weserv.nl/?url=' + item.image[0]"   mode="aspectFill"></image>
							<view class="goods_info">
								<view class="name">
									<u--text
										:lines="2"
										:text="item.title"
									></u--text>
								</view>
								<view class="price">
									<view class="buy_price">
										<view class="vip_price">
											￥{{ item.price }}
										</view>
										<!-- <view class="line_price">
											￥99999
										</view> -->
									</view>
									<view class="buy_btn" @click.stop="">
										<!-- <u-number-box
											slot="right-icon"
											v-model="item.value"
											step="1"
											:min="0"
											:showMinus="item.value > 0"
										>
											<view slot="minus" class="minus">
												<u-icon
													name="minus"
													size="10"
												></u-icon>
											</view>
											<text
												slot="input"
												style="text-align: center"
												class="input"
											>
												<text v-if="item.value>0">{{ item.value || 0 }}</text>
											</text>
											<view slot="plus" class="plus" @click="addcart(item.id)">
												<u-icon
													name="plus"
													color="#FFFFFF"
													size="10"
												></u-icon>
											</view>
										</u-number-box> -->
										<view slot="plus" class="plus" @click="addcart(item.id)">
											<u-icon
												name="plus"
												color="#FFFFFF"
												size="10"
											></u-icon>
										</view>
									</view>
								</view>
							</view>	
						</view>
					</view>
					<view v-show="subCategoryList.length == 0"  style="position: relative;top: 80rpx;">
						<u-empty
							mode="list"
							icon="http://cdn.uviewui.com/uview/empty/car.png"
							iconSize="150"
						></u-empty>
					</view>
				</scroll-view>
			</view>
		</view>

		<tabbar ref="tabbartab"></tabbar>
	</view>
</template>

<script>
	import { categories } from '../../api/base';
	import { products } from '../../api/base';
	import { addcart , cartList } from '@/api/shopcart' 
export default {
	computed: {
		// subCategoryList() {
		// 	return this.categoryList[this.activeIndex]?.children || [];
		// }
	},
	data() {
		return {
			keyword: '',
			value11: 0,
			activeIndex: '0',
			categoryList: [
				// {
				// 	id:6669,
				// 	name:'爆品'
				// }
			],
			subCategoryList:[],
			params:{
				page:1,
				per_page:99,
				category_id:0
			},
			cartList:[],
			isLogin:false,
		};
	},
	onShareAppMessage() {
			return {
			  title: '掌讯达商城',
			  path: '/pages/index/index',
			  // imageUrl: this.goodsInfo.image[0]  // 分享显示的图片
			};
	 },
	 onShareTimeline() {
	   return {
	     title: '掌讯达商城',
	     // query: 'key=value' // 可选 参数
	   }
	 },
	onShow() {
		if(uni.getStorageSync('userInfo')){
			this.isLogin = true
		}else{
			this.isLogin = false
		}
	},
	onLoad() {
		this.getCategoryList()
	},
	methods: {
		// 获取商品分类列表
		getCategoryList(){
			categories().then(res => {
				this.categoryList = res.data
				this.params.category_id = this.categoryList[0].id
				this.getProductList()
			})
		},
		// 点击左侧分类
		leftNavigate(event){
			console.log(event.currentTarget.dataset)
			this.activeIndex = event.currentTarget.dataset.index
			this.params.category_id = event.currentTarget.dataset.item.id
			this.getProductList()
		}, 
		// 商品列表
		getProductList(){
			products(this.params).then(res => {
				// 购物车列表
				// cartList().then(res => {
				//     if (res.status == 200) {
				// 		this.cartList = res.data
				//     }
				// })
				this.subCategoryList = res.data.data
				// this.subCategoryList.forEach(a => {
				// 	this.cartList.forEach(b => {
				// 		if(a.id == b.product_sku.id){
				// 			a.value = b.amount
				// 		}
				// 	})
				// })
			})
		},
		addcart(id){
			if(this.isLogin == true){
				addcart({
					sku_id:id,
					amount:1
				}).then(res => {
					if(res.status == 200){
						uni.showToast({
							title:'加入购物车成功'
						})
						this.$refs.tabbartab.getCartList()
					}
				})
			}else{
				this.loginModal()
			}
			
		},
		// 跳转商品详情
		goToGoods(i){
			uni.navigateTo({
				url:`/mallPage/goodsInfo/goodsInfo?id=${i}`
			})
		},
		initList(){
			uni.navigateTo({
				url:`../searchPage/searchPage?keyword=${this.keyword}`
			})
		}
	}
};
</script>

<style></style>
<style lang="scss">
page {
	height: 100%;
	overflow: hidden;
}
.search {
	padding: 10rpx 30rpx 30rpx 30rpx;
	background-color: #fff;
}
.viewport {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.categories {
		flex: 1;
		height: 100%;
		display: flex;
		.primary {
			overflow: hidden;
			width: 180rpx;
			min-height: 100%;
			flex: none;
			background-color: #f6f6f6;
			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 96rpx;
				font-size: 26rpx;
				color: #595c63;
				position: relative;
			}
			.active {
				background-color: #fff;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					width: 8rpx;
					height: 40%;
					background-color: #1786f8;
					transform: translateY(-50%);
				}
			}
		}
		.secondary {
			height: 100%;
			background-color: #fff;
			.panel {
				padding: 30rpx;
				.section {
					display: flex;
					.goods_info {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name {
							width: 280rpx;
						}
						.price {
							width: 330rpx;
							font-size: 20rpx;
							display: flex;
							justify-content: space-between;
							.buy_price{
								.vip_price {
									font-size: 24rpx;
									color: #1786f8;
								}
								.line_price {
									text-decoration: line-through;
									color: #aaa;
								}
							}

							.buy_btn {
								.minus {
									width: 20px;
									height: 20px;
									border: 2px solid #1786f8;
									border-radius: 50%;
									@include flex;
									justify-content: center;
									align-items: center;
								}

								.input {
									padding: 0 10px;
									font-size: 26rpx;
								}
								.plus {
									width: 20px;
									height: 20px;
									background-color: #1786f8;
									border: 2px solid #1786f8;
									border-radius: 50%;
									@include flex;
									justify-content: center;
									align-items: center;
								}
							}
						}
					}
					image {
						height: 150rpx;
						width: 150rpx;
						min-width: 150rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
}
</style>
